<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LangChain4j 聊天界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        #chat-container {
            display: flex;
            flex-direction: column;
            height: 90vh;
            border: 1px solid #ddd;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
        }
        #message-area {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        .message {
            margin-bottom: 15px;
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 18px;
            word-wrap: break-word;
        }
        .user-message {
            margin-left: auto;
            background-color: #dcf8c6;
            border-top-right-radius: 5px;
        }
        .ai-message {
            margin-right: auto;
            background-color: #f1f1f1;
            border-top-left-radius: 5px;
        }
        #input-container {
            display: flex;
            padding: 15px;
            border-top: 1px solid #ddd;
            background-color: #f5f5f5;
        }
        #message-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 20px;
            outline: none;
        }
        #send-button {
            margin-left: 10px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
        }
        #send-button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <div id="message-area"></div>
        <div id="input-container">
            <input type="text" id="message-input" placeholder="输入消息...">
            <button id="send-button">发送</button>
        </div>
    </div>

    <script>
        const messageArea = document.getElementById('message-area');
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');

        // 添加用户消息到聊天区域
        function addUserMessage(message) {
            const messageElement = document.createElement('div');
            messageElement.className = 'message user-message';
            messageElement.textContent = message;
            messageArea.appendChild(messageElement);
            scrollToBottom();
        }

        // 添加AI消息到聊天区域
        function addAiMessage(message) {
            const messageElement = document.createElement('div');
            messageElement.className = 'message ai-message';
            messageElement.textContent = message;
            messageArea.appendChild(messageElement);
            scrollToBottom();
        }

        // 滚动到底部
        function scrollToBottom() {
            messageArea.scrollTop = messageArea.scrollHeight;
        }

        // 发送消息处理
        sendButton.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        function sendMessage() {
            const message = messageInput.value.trim();
            if (!message) return;

            addUserMessage(message);
            messageInput.value = '';

            // 创建AI消息元素
            const aiMessageElement = document.createElement('div');
            aiMessageElement.className = 'message ai-message';
            messageArea.appendChild(aiMessageElement);
            
            // 使用EventSource接收流式响应
            const eventSource = new EventSource(`/chat?message=${encodeURIComponent(message)}`);
            let aiResponse = '';

            eventSource.onmessage = function(e) {
                aiResponse += e.data;
                aiMessageElement.textContent = aiResponse;
                scrollToBottom();
            };

            eventSource.onerror = function() {
                eventSource.close();
                if (!aiResponse) {
                    aiMessageElement.textContent = '对话结束';
                }
                scrollToBottom();
            };
        }
    </script>
</body>
</html>